<script setup lang="ts">
import { defineProps } from 'vue';
import { ref } from 'vue'
import { commentListService, addCommentService } from '@/api/comment'
import { ElMessage } from 'element-plus'

const props = defineProps({
    titleId: Number // 声明接收一个Number类型的prop
});

//评论树
interface Tree {
    id: number
    username: string
    pid: number
    content: string
    toCommentUserId: number
    createTime: string
    createBy: number
    children?: Tree[]
}
const dataSource = ref<Tree[]>([])
//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(20)//每页条数
const isShowComment = ref(false)
//获取说说评论树
const selectCommentTree = async (titleId: any) => {
    let params = {
        page: page.value,
        pageSize: 20,
        type: '1',
        titleId: titleId ? titleId : null,
    }
    let result = await commentListService(params);

    if (result.data.total === 0) {
        isShowComment.value = false
    } else {
        isShowComment.value = true

        //渲染视图
        total.value = result.data.total;
        dataSource.value = result.data.records;

    }
}
selectCommentTree(props.titleId)

//添加评论表单模型
const commentForm = ref({
    type: '1',
    titleId: 1,
    pid: -1,
    content: "",
    toCommentUserId: -1,
})
const clearCommentForm = () => {
    commentForm.value = {
        type: '1',
        titleId: 1,
        pid: -1,
        content: "",
        toCommentUserId: -1
    }
}
const reply = ref("")
//回复评论对话框
const dialogVisible = ref(false)
const showdialog = (id: any, createBy: any) => {
    dialogVisible.value = true
    commentForm.value.pid = id
    commentForm.value.toCommentUserId = createBy
}
//回复评论
const replyComment = async (titleId :any) => {
    commentForm.value.content = reply.value
    commentForm.value.titleId = titleId
    let result = await addCommentService(commentForm.value) as any
    ElMessage.success(result.msg ? result.msg : '回复成功')
    selectCommentTree(titleId)
    clearCommentForm()
    dialogVisible.value = false
    reply.value = ''
}
</script>

<template>
    <div class="comment" v-if="isShowComment">
        <div v-for="item in dataSource" :key="item.id" style="margin-top: 10px;">
            <span style="padding: 10px;">
                <span style="color: #057ee2;">{{ item.username }}: </span>
                <span v-html="item.content"></span>
                <el-button style="float: right;" text @click="showdialog(item.id, item.createBy)">
                    回复
                </el-button>
            </span>

            <div v-if="item.children?.length !== 0 ? true : false" style="margin-top: 10px;">
                <div v-for="item1 in item.children" :key="item1.id">
                    <span style="padding: 10px;">
                        <span style="color: #057ee2">{{ item1.username }} </span>
                        <span>回复</span>
                        <span style="color: #057ee2;font-size: 18px;">{{ item.username }}: </span>
                        <span v-html="item1.content"></span>
                        <el-button style="float: right;" text @click="showdialog(item1.id, item1.createBy)">
                            回复
                        </el-button>
                    </span>

                    <div v-if="item1.children?.length !== 0 ? true : false" style="margin-top: 10px;">
                        <div v-for="item2 in item1.children" :key="item2.id">
                            <span style="padding: 10px;">
                                <span style="color: #057ee2">{{ item2.username }} </span>
                                <span>回复</span>
                                <span style="color: #057ee2">{{ item1.username }}: </span>
                                <span v-html="item2.content"></span>
                            </span>
                            <el-button style="float: right;" text @click="showdialog(item2.id, item2.createBy)">
                                回复
                            </el-button>

                            <div v-if="item2.children?.length !== 0 ? true : false" style="margin-top: 10px;">
                                <div v-for="item3 in item2.children" :key="item3.id">
                                    <span style="padding: 10px;">
                                        <span style="color: #057ee2">{{ item3.username }} </span>
                                        <span>回复</span>
                                        <span style="color: #057ee2;">{{ item2.username }}: </span>
                                        <span v-html="item3.content"></span>
                                    </span>
                                    <el-button style="float: right;" text
                                        @click="showdialog(item3.id, item3.createBy)">
                                        回复
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible">
            <el-input type="textarea" v-model="reply" placeholder="回复" :rows="2"></el-input>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false; reply = ''; clearCommentForm()">取消</el-button>
                    <el-button type="primary" @click="replyComment(titleId)">发表</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.comment {
    border: 1px;
    background-color: rgba(215, 221, 221, 0.562);
    margin-left: 58px;
    font-size: 18px;
}
</style>